<template>
  <div class="login">
      <div class="logo">
          <img src="//s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:9096d347/d1811b03e6c76231a4d593fad09cc8d6.png" alt="">
          <span class="title">美团外卖</span>
      </div>
    <!-- 表单 -->
    <van-form @submit="onSubmit">
        <van-field
            v-model="username"
            name="username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
            <van-button round block color="#F9BD00" native-type="submit">提交</van-button>
        </div>
    </van-form>

    <div class="confirm">
        <van-checkbox v-model="checked"></van-checkbox>
        <div class="tips">
            <span>我已阅读并同意</span>
            <a href="https://rules-center.meituan.com/m/detail/4" style="color: #3488FF">《美团用户协议》、</a>
            <a href="https://rules-center.meituan.com/m/detail/2" style="color: #3488FF">《隐私政策》</a>
            <span>，并授权美团使用该美团账号信息（如昵称、头像、收货地址）进行统一管理</span>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      username: '',
      password: '',
      checked: true,
    }
  },
  methods: {
    onSubmit (userInfo) {
      console.log('submit', userInfo)
      this.$store.dispatch('login', { user: userInfo })
        .then(() => {
          this.$router.push('/mine')
        })
    },
  },
}
</script>

<style lang='less'>
.login{
    .logo{
        width: 100%;
        height: 472px;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        img{
            width: 162px;
            height: 162px;
        }
        .title{
            font-size: 24px;
        }
    }
    .confirm{
        display: flex;
        padding: 10px 30px;
        font-size: 15px;
        position: relative;
        .tips{
            position: absolute;
            left: 80px;
        }
    }
}
</style>
